<template>
  <div class="categories">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumb="breadcrumb"></breadcrumb>
    <el-card class="box-card content">
      <!-- 添加 -->
      <el-button class="addCategories" @click="isShowCategoriesDialog" type="primary">添加分类</el-button>
      <!-- 用户列表 -->
      <tree-table
        class="treeTable"
        :data="categoriesList"
        show-index
        border
        :expand-type="false"
        index-text="#"
        :selection-type="false"
        :columns="columns"
      >
        <!-- 第二列 -->
        <template #isOk="scope">
          <i v-if="scope.row.cat_deleted===false" style="color:green" class="el-icon-success"></i>
          <i v-else class="el-icon-error" style="color:red"></i>
        </template>
        <!-- 第三列 -->
        <template #rank="scope">
          <el-tag v-if="scope.row.cat_level===0" type="success">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level===1" type="info">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <!-- 第四列 -->
        <template #operation="scope">
          <el-button
            size="mini"
            @click="editCategories(scope.row)"
            type="primary"
            icon="el-icon-edit"
          >编辑</el-button>
          <el-button
            size="mini"
            @click="delCategories(scope.row)"
            type="danger"
            icon="el-icon-delete"
          >删除</el-button>
        </template>
      </tree-table>
      <!-- 新增分类弹框 -->
      <el-dialog
        title="新增分类"
        @close="closeCategoriesDialog"
        :visible.sync="categoriesdialogVisible"
        width="50%"
      >
        <el-form ref="cateRef" :rules="cateRules" :model="cateForm" label-width="100px">
          <el-form-item label="分类名称:" prop="cat_name">
            <el-input v-model="cateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="分类名称:">
            <el-cascader
              v-model="cateArr"
              :options="options"
              :props="props"
              change-on-select
              clearable
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="categoriesdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategories">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <div class="block-page">
        <el-pagination
          @current-change="getCategories"
          @size-change="getCategories"
          :current-page.sync="pagenum"
          :page-sizes="[1, 5, 10]"
          :page-size.sync="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalpage"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
           
<script>
export default {
  name: "categories",
  data() {
    return {
      // 面包屑导航传值
      breadcrumb: ["商品管理", "商品分类"],
      // 分类数据
      categoriesList: [],
      // 当前页码
      pagenum: 1,
      // 每页显示数据条数
      pagesize: 5,
      // 总页数
      totalpage: 0,
      columns: [
        // 第一列
        {
          label: "分类名称",
          prop: "cat_name"
        },
        // 第二列----应用模本
        {
          label: "是否有效",
          type: "template",
          template: "isOk",
          width: "80"
        },
        // 第三列----应用模本
        {
          label: "排序",
          type: "template",
          template: "rank",
          width: "80"
        },
        // 第四列----应用模本
        {
          label: "操作",
          type: "template",
          template: "operation",
          width: "200"
        }
      ],
      // 是否显示怎增弹框
      categoriesdialogVisible: false,
      // 新增数据
      cateForm: {
        // 新增名
        cat_name: "",
        // 父类id
        cat_pid: 0,
        // 等级
        cat_level: 0
      },
      // 新增时，用户名检验
      cateRules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ]
      },
      // 保存选中的商品id
      cateArr: [],
      // 商品分类  二级  三级分类
      options: [],
      // 级联选择器配置内容
      props: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        expandTrigger: "hover"
      }
    };
  },
  created() {
    this.getCategories();
  },
  methods: {
    // 初始化
    async getCategories() {
      const { data: res } = await this.$http.get(`/categories`, {
        params: {
          type: 3,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      });
      // 赋值当前页
      this.pagenum = res.data.pagenum + 1;
      // 赋值每页显示条数
      this.pagesize = res.data.pagesize;
      // 赋值总条数
      this.totalpage = res.data.total;
      // 赋值列表数据
      this.categoriesList = res.data.result;
    },
    // 显示新增弹框
    async isShowCategoriesDialog() {
      // 请求分类等级
      const { data: res } = await this.$http.get("/categories", {
        params: {
          type: 2
        }
      });
      //  赋值===所有
      console.log(res);
      this.options = res.data;

      // 显示弹框
      this.categoriesdialogVisible = true;
    },
    // 增加分类
    addCategories() {
      console.log(this.cateForm);

      this.$refs.cateRef.validate(async valid => {
        if (!valid) return;

        const { data: res } = await this.$http.post(
          "/categories",
          this.cateForm
        );
        console.log(res);
        if (res.meta.status !== 201) {
          return this.$message.error("添加分类失败");
        }
        this.$message.success("添加分类成功");
        this.getCategories();
        this.categoriesdialogVisible = false;
      });

      // 发送请求
    }, // 商品分类
    handleChange() {
      // 选项改变时
      // 添加一级时---不需要选择

      // 添加二级时---父类id为数组最后一项--- 权限为1;
      // 添加三级时---父类id为数组最后一项--- 2;
      if (this.cateArr.length > 0) {
        // 父类id
        this.cateForm.cat_pid = this.cateArr[this.cateArr.length - 1];
        // 权限
        this.cateForm.cat_level = this.cateArr.length;
      } else {
        // 父类id
        this.cateForm.cat_pid = 0;
        // 权限
        this.cateForm.cat_level = 0;
      }
    },
    //弹框关闭时--清空数据
    closeCategoriesDialog() {
      this.$refs.cateRef.resetFields();
      this.cateArr = [];
      // 父类id
      this.cateForm.cat_pid = 0;
      // 权限
      this.cateForm.cat_level = 0;
    }
  }
};
</script>
<style scoped lang='less'>
.categories {
  width: 100%;
  height: 100%;
  .content {
    padding: 10px 20px;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 8px;
    .treeTable {
      margin-top: 10px;
    }
    .block-page {
      margin-top: 10px;
    }
    .el-popper {
      max-height: 285px;
      overflow: auto;
    }
    .el-cascader {
      width: 100%;
    }
  }
}
</style>